window.addEventListener("load", function () {



   let cishu = document.getElementById('cishu');
   // console.log(cishu);



   let data = [
      { "times": 4000, "price": 1200, "unitPrice": "0.3000" },
      { "times": 8000, "price": 2000, "unitPrice": "0.2500" },
      { "times": 40000, "price": 8000, "unitPrice": "0.2000" }
   ]



   data.forEach(function (v, i) {
      let tianjia = document.createElement('span');
      // v.classList.remove('bian')
      tianjia.className = 'zi1';
      tianjia.innerHTML = v.times + '次'
      cishu.appendChild(tianjia);



      tianjia.addEventListener('click', function () {
         // console.log(this);
         let total = document.getElementById('total');
         total.innerHTML = '';
         total.innerHTML = '¥' + v.price;
         let danjia = document.getElementById('danjia');
         danjia.innerHTML = v.unitPrice;
         danjia.innerHTML = '';


         // let aa=cishu.querySelectorAll('span');
         let zi1=document.querySelectorAll('.zi1')
         // console.log(aa);
         for (let i = 0; i <zi1.length; i++) {
            zi1[i].classList.remove('bian');

         }
         this.className = 'zi1 bian';


      })


   })


   //  tianjia=this.addEventListener('click',function(v){  
   //     for(let i=0;i<tianjia.length;i++){
   //      tianjia[i].classList.add('bian')
   //     }

   //  })















































})